<template>
	<view class="count">
		<view class="sech">
			<image src="/static/home/sceh.png" class="sousuo" mode=""></image>
			<input type="text" v-model="value" @input="change" placeholder="请输入书籍名称进行搜索" @confirm="givMi"
				class="inp p-l-80" name="" id="">
		</view>
		<view class="body ">
			<scroll-view scroll-y class="scllo" @scrolltolower="towOnreachBottom">
				<view style="height: 100%;" class="f f-w-w">
					<view v-for="(item,index) in list" :key="index" @click="qieItem(item,index)"
						class="item f f-a-c f-j-c f-d-c">
						<view class="bor" :class="{borderBg:ind==index}">
							<image :src="item.examination.cover" class="igm" mode=""></image>
						</view>
						<view class="books">
							{{item.examination.name}}
						</view>
						<view class="author">
							作者:{{item.examination.author}}
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
		<view class="btn">
			<view @click="strat" class="clearance">
				开始通关
			</view>
			<view @click="read" class="records f f-a-c f-j-c m-t-20">
				阅读通关记录 <image src="/static/my/you2.png" class="you m-l-10" mode=""></image>
			</view>
		</view>
		<!-- 下面的规则提示按钮 -->
		<image @click="examination_rule" src="/static/guize.png" class="guize" mode=""></image>
		<u-mask :show="show">
			<view class="center">
				<image src="/static/login/bg.png" class="bg" mode=""></image>
				<view class="gize">
					<image src="/static/cha.png" @click="show=false" class="cha" mode=""></image>
					<view class="tishi">
						规则及提示
					</view>
					<view class="xuanze">
						请认真选择类型，如实答题，保持自己信用度！
					</view>
				</view>
			</view>
		</u-mask>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				show: true,
				ind: 0,
				page: 1,
				value: '',
				taol: 0,
				list: [],
				id: ''
			}
		},
		onShow() {
			this.list = []
			this.page = 1
			this.initList()
			// this.id = this.list[0].id
		},
		methods: {
			change(e) {
				if (e.detail.value.length == 0) {
					this.page = 1
					this.list = []
					this.initList()
				}
			},
			givMi() {
				this.page = 1
				this.list = []
				this.initList()
			},
			examination_rule() {
				uni.navigateTo({
					url: '/pageC/detils?name=examination_rule'
				})
			},
			async initList() {
				let n = await this.$api.BooksList({
					q: this.value,
					page: this.page
				})
				this.taol = n.data.total //总页数
				if (this.list.length <= this.taol) {
					this.list = [...this.list, ...n.data.data]
				} else {
					this.list = n.data.data
				}
			},
			// 点击阅读通关记录
			read() {
				uni.navigateTo({
					url: '/pages/ReadingParty/ReadClearanceRecords'
				})
			},
			// /点击跳转开始通关
			async strat() {
				// let n = await this.$api.ExaminationBook({
				// 	id: this.id ? this.id : this.list[0].id
				// })
				if (this.list[this.ind].is_complete) {
					return this.$msg('已经闯完本关卡！')
				}
				uni.navigateTo({
					url: `/pages/ReadingParty/StartCustoms?id=${this.id?this.id:this.list[0].id}`
				})
			},
			// /切换
			qieItem(item, index) {
				this.ind = index
				this.id = item.id
			},
			towOnreachBottom() {
				this.page++
				this.initList()
				console.log('123456');
			}
		}
	}
</script>

<style lang="scss" scoped>
	.center {
		position: absolute;
		width: 70%;
		border-radius: 20rpx;
		height: 602rpx;
		// background-color: pink;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);

		.bg {
			position: absolute;
			border-radius: 20rpx;
			width: 100%;
			border-radius: 20rpx;
			height: 602rpx;
			// background-color: pink;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);

		}

		.gize {
			position: relative;
			width: 100%;
			height: 100%;
			z-index: 999999999999999;

			.cha {
				position: absolute;
				width: 48rpx;
				height: 48rpx;
				bottom: -0rpx;
				left: 50%;
				transform: translateX(-50%);
			}
		}

		.tishi {
			font-size: 32rpx;
			font-family: PingFang SC, PingFang SC-Bold;
			font-weight: 700;
			text-align: center;
			color: #ffffff;
			margin: 40rpx 0;
			margin-top: 100rpx;
		}

		.xuanze {
			font-size: 28rpx;
			font-family: PingFang SC, PingFang SC-Regular;
			font-weight: 400;
			text-align: center;
			color: #ffffff;
			padding: 0 50rpx;
		}
	}

	.guize {
		width: 140rpx;
		height: 140rpx;
		position: fixed;
		bottom: 300rpx;
		right: 10rpx;
	}

	.btn {
		position: fixed;
		width: 90%;
		left: 5%;
		bottom: 80rpx;

		.records {
			font-size: 26rpx;
			font-family: PingFang SC, PingFang SC-Regular;
			font-weight: 400;
			text-align: center;
			color: #999999;

			.you {
				width: 12rpx;
				height: 22rpx;
			}
		}

		.clearance {
			width: 100%;
			height: 88rpx;
			line-height: 85rpx;
			background: #009d85;
			border-radius: 44rpx;
			font-size: 30rpx;
			font-family: PingFang SC, PingFang SC-Bold;
			font-weight: 700;
			text-align: center;
			color: #ffffff;
		}
	}

	.body {
		// background-color: pink;
		max-height: 80vh;
		width: 100%;
		overflow-y: auto;
		padding: 50rpx;

		.scllo {
			max-height: 80vh;
		}

		.item {
			width: 164rpx;
			height: 300rpx;
			margin-bottom: 20rpx;
			margin-right: 12%;

			&:nth-child(3n) {
				margin-right: 0;
			}

			.books {
				font-size: 28rpx;
				font-family: PingFang SC, PingFang SC-Bold;
				font-weight: 700;
				color: #1a1a1a;
				display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 1;
				overflow: hidden;
				text-overflow: ellipsis;
			}

			.author {
				font-size: 26rpx;
				font-family: PingFang SC, PingFang SC-Regular;
				font-weight: 400;
				color: #999999;
			}

			.bor {
				border: 6rpx solid transparent;
				width: 100%;
				height: 208rpx;
				border-radius: 20rpx;
				overflow: hidden;
			}

			.borderBg {
				border: 6rpx solid #009d85;
			}

			.igm {
				width: 100%;
				height: 208rpx;
			}
		}
	}

	.sech {
		position: fixed;
		width: 100%;
		padding: 0 20rpx;
		background-color: #fff;
		top: 0;


		.sousuo {
			width: 33rpx;
			height: 35rpx;
			position: absolute;
			top: 50%;
			transform: translateY(-50%);
			left: 50rpx;
		}

		.inp {
			width: 100%;
			height: 72rpx;
			background: #f6f6f6;
			border-radius: 36rpx;
			box-sizing: border-box;
		}
	}

	.count {
		height: 100vh;
		width: 100%;
		padding-top: 72rpx;
		background-color: #fff;
		padding-bottom: 200rpx;
	}
</style>